<template>
  <div class='info-container'>
      <!-- 标题 -->
      <h3 class='title'>{{info.title}}</h3>
      <div class='subtitle'> 
          <span>发表时间：{{info.add_time |dataFormat}}</span>
          <span>点击：{{info.click}}次</span>
      </div>
      <hr>
      <!-- 内容区域 -->
      <div v-html='info.content' class='content'></div>
      <!-- 评论子组件区域 -->
      <comment :id='infoId'></comment>
    </div>
</template>
<script>
import {Toast} from 'mint-ui';
import Comment from '../Comment.vue';
    export default{
        data(){
            return{infoId:this.$route.params.id,info:null}
        },
        created(){
            this.getnewsInfo()
        },
        methods:{
            getnewsInfo(){
                this.$http.get('api/getnew/'+this.infoId).then((result)=>{
                    console.log(result.body);
                    if(result.body.status==0){
                        this.info=result.body.message[0];
                    }else{
                        Toast('获取新闻失败！')
                    }
                })
            }
        },
        components:{ //用来注册子组件的节点
            'comment':Comment
        }
    }
</script>
<style lang='scss'>
.info-container{
    padding:0 5px;
 .title{
        font-size:16px;
        color:red;
        text-align:center;
        line-height:40px;
    }
    .subtitle{
        font-size:13px;
        display: flex;
        justify-content:space-between;
        color:#226aff;
       
    }
    .content{
         img{
            width:100%;
        }
    }

}
   
</style>

